<template>
  <el-container>
    <el-aside style='transition: all linear .2s' :width="flag ? '63px': '200px'">
      <Menu :flag='flag' :menuData='menuData'/>
    </el-aside>
    <el-container>
      <el-header class='header'>
        <Header @fnIcon='fnIcon'/>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import {reactive, toRefs} from 'vue'
  import Header from './components/common/Header'
  import Menu from './components/common/Menu'
  export default {
    name: 'App',
    setup(){
      let state = reactive({
        flag: false,
        menuData: [
          {
            title: '导航1',
            children: [
              {
                title: '导航1-1',
                children: [
                  {
                    title: '导航1-2',
                    children: [
                      {
                        title: '导航1-2-1',
                        index: '/test1'
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            title: '导航2',
            index: '/test2'
          },
          {
            title: '导航3',
            index: '/test3'
          }
        ]
      })
      const fnIcon = (data) => {
        state.flag = data
      }
      return {
        ...toRefs(state),
        fnIcon
      }
    },
    components: {
      Header,
      Menu
    }
  }
</script>

<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .el-container .el-aside{
    height: 100vh;
    overflow-y: auto;
  }
  .el-container .el-aside ul{
    height: 100%;
  }
  .header{
    border-bottom: 1px solid #efefef;
  }
</style>
